<template>
	<view>
		<view>常用组件的学习</view>
		<view><text>text文本组件</text></view>
		<view><text selectable>text组件，加selectable长按可选择文本</text></view>
		<view>---------------------</view>
		<view><text space="ensp">text组件 显示连续空格[中文字符空格一半大小]</text></view>
		<view>---------------------</view>
		<view><text space="emsp">text组件 显示连续空格[中文字符空格大小]</text></view>
		<view>---------------------</view>
		<view><text space="nbsp" style="font-size: 20px;">text文本组件 显示连续空格[根据字体设置的空格大小]</text></view>
		<view>---------------------</view>
		<view><text>&amp; 解码成&符号[decode]</text></view>

		<view>========================</view>
		<view>view视图容器组件</view>
		<view class="box" hover-class="box-active">view组件，相当于DIV，用hover-class控制长按变换背景色[点击态]</view>
		<view>---------------------</view>
		<view class="box1" hover-class="box-active1">
			<view class="box" hover-class="box-active" hover-stop-propagation>view组件，用hover-stop-propagation阻止本节点的父节点出现点击换背景色</view>
		</view>
		<view>---------------------</view>
		<view class="box" hover-class="box-active" :hover-start-time="2000">view组件，用:hover-start-time设置按住2秒后换背景色，单位毫秒</view>
		<view>---------------------</view>
		<view class="box" hover-class="box-active" :hover-stay-time="2000">view组件，用:hover-stay-time设置手指松开后背景色保留时间，单位毫秒</view>
		<view>========================</view>
		<view>button按钮组件</view>
		<button>default默认大小按钮</button>
		<view>---------------------</view>
		<button size="mini">mini小尺寸按钮</button>
		<view>---------------------</view>
		<!-- primary:微信小程序为绿色，App、H5、百度小程序、
		支付宝小程序为蓝色，字节跳动小程序为红色，QQ小程序为浅蓝色 -->
		<button type="primary">primary按钮</button>
		<view>---------------------</view>
		<button type="default">default白色按钮</button>
		<view>---------------------</view>
		<button type="warn">warn红色按钮</button>
		<view>---------------------</view>
		<button type="primary" plain>plain镂空按钮[背景色透明]</button>
		<view>---------------------</view>
		<button type="primary" disabled>disabled禁用按钮</button>
		<view>---------------------</view>
		<!-- loading:App-nvue平台，在ios上为雪花，Android上为圆圈 -->
		<button type="primary" loading>带loading图标按钮</button>
		<view>========================</view>
		<view>image图片组件</view>
		<!-- 组件默认宽度300px、高度225px -->
		<image src="../../static/logo.png"></image>
		<view>---------------------</view>
		<!-- mode有13种模式，其中4种是缩放模式，9种是裁剪模式
		详情查看mode有效值:https://uniapp.dcloud.net.cn/component/image -->
		<!-- aspectFit:保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说可以完整地将图片显示出来。 -->
		<image src="../../static/logo.png" mode="aspectFit"></image>
		<!-- aspectFill:保持纵横比缩放图片，只保证图片的短边能完全显示出来。
		也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 -->
		<image src="../../static/logo.png" mode="aspectFill"></image>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {},
	// onLoad监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）
	onLoad(options) {
		// 接收navigator的index.vue传过来的参数
		console.log(options);
	}
};
</script>

<style>
.box {
	width: 200px;
	height: 120px;
	background-color: #c0c0c0;
}
.box-active {
	background-color: #dd524d;
}
.box1 {
	width: 280px;
	height: 220px;
	background-color: #00ff00;
}
.box-active1 {
	background-color: pink;
}
</style>
